<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>数组求和</title>
    <style>

        .outer {
            width: 500px;
            margin: 10px auto;
        }

        input {
            display: block;
            margin: 10px;
        }

        input[type="text"] {
            width: auto;
            height: 20px;
            min-width: 250px;
            line-height: 20px;
            font: 12px/1.5 Tahoma;
            display: inline;
        }

        span {
            color: #999;
            font: 12px/1.5 Tahoma;
        }
    </style>
    <script>
        window.onload = function(){
            var oBtn = document.getElementsByTagName("input")[1];
            var oInput = document.getElementsByTagName("input")[0];
            var Sum = document.getElementById("sum");

            oInput.onkeyup = function(){
                this.value = this.value.replace(/[^(\d)|(,)]/,"");
            }
            oBtn.onclick = function (){
                var sum = 0;
                var input = oInput.value.split(",");
               //数组函数
                for (var i in input){
                    sum += parseInt(input[i]); 
                    console.log(input[i]);
                }
                Sum.innerHTML = sum;
            }
        }
    </script>
</head>

<body>
    <div class="outer">
        <input type="text" value="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15">
        <span>输入数字求和，数字之间用半角","号分隔</span>
        <input type="button" value="求和">
        <strong id="sum" style="color: red; margin-left: 10px; font-size: 30px;"></strong>
    </div>
</body>

</html>